<template>
  <div class="container">
    <div class="title">
      <h1 @click="changeTheme">数据可视化</h1>
    </div>
    <div class="grid">
      <ItemLayout class="centre">
        <Map />
      </ItemLayout>
      <ItemLayout class="bottom">
        <Gauge />
      </ItemLayout>
      <ItemLayout class="upper-left">
        <Line />
      </ItemLayout>
      <ItemLayout class="lower-left">
        <Bar />
      </ItemLayout>
      <ItemLayout class="upper-right">
        <Bar />
      </ItemLayout>
      <ItemLayout class="lower-right">
        <Line />
      </ItemLayout>
    </div>
  </div>
</template>

<script setup lang="ts">
import ItemLayout from "./components/ItemLayout.vue";
import Map from "./components/Map.vue";
import Bar from "./components/Bar.vue";
import Line from "./components/Line.vue";
import Gauge from "./components/Gauge.vue";
import { useGlobalStore } from "./modules/pinia";
import SocketService from "./modules/webSocket";
import { onMounted } from "vue";

const globalStore = useGlobalStore();

onMounted(() => {
  SocketService.Instance.connect();
});

function changeTheme() {
  globalStore.changeTheme();
}
</script>

<style scoped lang="less">
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .title {
    height: 80px;
    background-color: #fff;
    text-align: center;
    h1 {
      margin: 0;
      display: inline-block;
      line-height: 80px;
      cursor: pointer;
      user-select: none;
    }
  }
  .grid {
    box-sizing: border-box;
    display: grid;
    padding: 20px;
    width: 100%;
    height: calc(100% - 80px);
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background-color: #eee;
    .centre {
      grid-row-start: 1;
      grid-row-end: 4;
      grid-column-start: 2;
      grid-column-end: 4;
    }
    .bottom {
      grid-row-start: 4;
      grid-row-end: 5;
      grid-column-start: 2;
      grid-column-end: 4;
    }
    .upper-left {
      grid-row-start: 1;
      grid-row-end: 3;
      grid-column-start: 1;
      grid-column-end: 2;
    }
    .lower-left {
      grid-row-start: 3;
      grid-row-end: 5;
      grid-column-start: 1;
      grid-column-end: 2;
    }
    .upper-right {
      grid-row-start: 1;
      grid-row-end: 3;
      grid-column-start: 4;
      grid-column-end: 5;
    }
    .lower-right {
      grid-row-start: 3;
      grid-row-end: 5;
      grid-column-start: 4;
      grid-column-end: 5;
    }
  }
}
</style>
